<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>权限列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/asset/css/oksub.css">
</head>
<body class="ok-body-scroll">
<div class="ok-body">
    <!--面包屑导航区域-->
    <div class="ok-body-breadcrumb">
        <span class="layui-breadcrumb">
            <a><cite>首页</cite></a>
            <a><cite>常用页面</cite></a>
            <a><cite>权限列表</cite></a>
        </span>
        <a class="layui-btn layui-btn-sm" href="javascript:location.replace(location.href);" title="刷新">
            <i class="layui-icon layui-icon-refresh"></i>
        </a>
    </div>
    <!--模糊搜索区域-->
    <div class="layui-row">
        <div class="layui-form layui-col-md12 ok-search">
            <input type="text" class="layui-input" id="edt-search" placeholder="输入关键字" autocomplete="off">
            <button class="layui-btn" id="btn-search"><i class="layui-icon layui-icon-search"></i></button>
            <button class="layui-btn" id="btn-expand">全部展开</button>
            <button class="layui-btn" id="btn-fold">全部折叠</button>
            <button class="layui-btn" id="addPermission">添加权限</button>
        </div>
    </div>
    <table id="permissionTable" class="layui-table" lay-filter="permissionTable"></table>
</div>
<!--js逻辑-->
<script src="/asset/lib/layui/layui.js"></script>
<script>
    var json;//这里设置一个空的json串，用于接受表格的行信息
    /*使用模块加载的方式 加载文件*/
    layui.config({
        base: '/asset/lib/layui/lay/'
    }).extend({
        treetable: 'treetable-lay/treetable'
    }).use(['element', 'table', 'form', 'jquery', 'treetable',"okLayer","okUtils"], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var treetable = layui.treetable;
        var okLayer = layui.okLayer;
        var okUtils = layui.okUtils;
        // 渲染表格
        layer.load(2);
        treetable.render({
                treeColIndex: 1,//树形图标显示在第几列
                treeSpid: 0,//最上级的父级id
                treeIdName: 'id',//id字段的名称
                treePidName: 'pid',//pid字段的名称
                treeDefaultClose: false,//是否默认折叠
                treeLinkage: true,//父级展开时是否自动展开所有子级
                elem: '#permissionTable',
                url: '/sysPermission/permissionData',
                page: false,
                cols: [[
                    {type: 'numbers'},
                    {field: 'name', title: '资源名称'},
                    {field: 'url', title: '资源路径'},
                    {field: 'identification', title: '资源标识'},
                    {field: 'icon',width: 80, align: 'center', title: '图标'},
                    {field: 'id',width: 100, align: 'center', title: 'ID', hide: true},
                    {field: 'pid',width: 100, align: 'center', title: '父节点ID'},
                    {field: 'priority', width: 80, align: 'center',  title: '优先级'},
                    {
                        field: 'status', width: 80, align: 'center', templet: function (d) {
                            if (d.status == 1) {
                                return '<span class="layui-btn layui-btn-normal layui-btn-xs">已启用</span>';
                            } else {
                                return '<span class="layui-btn layui-btn-warm layui-btn-xs">已停用</span>';
                            }
                        }, title: '状态'
                    },
                    {
                        field: 'type', width: 80, align: 'center', templet: function (d) {
                            if (d.type == 1) {
                                return '<span class="layui-badge layui-bg-gray">按钮</span>';
                            }else if (d.type == 0) {
                                return '<span class="layui-badge-rim">菜单</span>';
                            } else {
                                return '<span class="layui-badge layui-bg-blue">目录</span>';

                            }
                        }, title: '类型'
                    },
                    {width: 120, title: '操作', templet: complain}
                ]],
                done: function () {
                    layer.closeAll('loading');
                }
            });

        //全部展开
        $('#btn-expand').click(function () {
            treetable.expandAll('#permissionTable');
        });
        //全部折叠
        $('#btn-fold').click(function () {
            treetable.foldAll('#permissionTable');
        });
        //关键字查询
        $('#btn-search').click(function () {
            var keyword = $('#edt-search').val();
            var searchCount = 0;
            $('#permissionTable').next('.treeTable').find('.layui-table-body tbody tr td').each(function () {
                $(this).css('background-color', 'transparent');
                var text = $(this).text();
                if (keyword != '' && text.indexOf(keyword) >= 0) {
                    $(this).css('background-color', 'rgba(250,230,160,0.5)');
                    if (searchCount == 0) {
                        treetable.expandAll('#permissionTable');
                        $('html,body').stop(true);
                        $('html,body').animate({scrollTop: $(this).offset().top - 150}, 500);
                    }
                    searchCount++;
                }
            });
            if (keyword == '') {
                layer.msg("请输入搜索内容", {icon: 5});
            } else if (searchCount == 0) {
                layer.msg("没有匹配结果", {icon: 5});
            }
        });
        //操作栏
        function complain(d){//操作中显示的内容
            if(d.parentId != 0){
                return [
                    '<a class="operation" lay-event="edit" href="javascript:" title="编辑"><i class="layui-icon layui-icon-edit"></i></a>',
                    '<a class="operation" lay-event="del" href="javascript:" title="删除"><i class="layui-icon layui-icon-delete" ></i></a>'
                ].join('');
            }else{
                return '';
            }
        }

        table.on("tool(permissionTable)", function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case "edit":
                    edit(data);
                    break;
                case "del":
                    del(data.id);
                    break;
            }
        });

        //添加权限
        $("#addPermission").click(function () {
            layer.open({
                title: '添加权限',
                type: 2,
                shade: false,
                maxmin: true,
                shade: 0.5,
                anim: 4,
                area: ['90%', '90%'],
                content: '/sysPermission/permissionAddView',
                zIndex: layer.zIndex,
                // skin: 'layui-layer-molv',
                end: function () {
                    $(".layui-laypage-btn")[0].click();
                }
            });
        })
        //删除权限
        function del(id) {
            okLayer.confirm("确定要删除吗？", function () {
                okUtils.ajax("/sysPermission/deletePermissionWithRole", "post", {permissionId: id}).done(function (response) {
                    console.log(response);
                    okUtils.table.successMsg("删除成功");
                    window.location.reload();
                }).fail(function (error) {
                    console.log(error)
                });
            })
        }
        //跳转到编辑页面
        function edit(data) {
            okLayer.open("编辑权限", "/sysPermission/permissionEditView", "90%", "90%", function () {
                json = JSON.stringify(data);
            }, function () {
                window.location.reload();
            })
        }
    })
</script>
</body>
</html>
